<template>
	<div>
		<LoginHeader>
			<div slot="i" style="font-size: 20px;">
				<router-link tag="span" to="/index/medal">
					<span class="el-icon-arrow-left"></span>
				</router-link>
			</div>
			<div slot="title" style="font-size: 20px;">勋章任务说明</div>
		</LoginHeader>
		<div class="body">
			<div>
				<div class="body_two">
					<span>1</span>
				</div>
				<span>薯粉等级</span>
			</div>
			<div class="body_one">
				<div class="one">薯粉们每天认真刷牙，会得到更多的金币奖励，金币可以换取素士礼品！不同的薯粉等级会有相应的额外奖励哦！</div>
				<div class="two">
					<span>白银薯粉：</span>
					<div>任务数：10个任务 金币加成：+2%</div>
				</div>
				<div class="two">
					<span>黄金薯粉：</span>
					<div>任务数：20个任务 金币加成：+4%</div>
				</div>
				<div class="two">
					<span>钻石薯粉：</span>
					<div>任务数：30个任务 金币加成：+6%</div>
				</div>
			</div>
			
		</div>
		<div class="body">
			<div>
				<div class="body_two">
					<span>2</span>
				</div>
				<span>日常奖励</span>
			</div>
			<div class="body_one">
				<div class="one">每次同步牙刷数据，会得到对应的奖励！</div>
				<div class="two">
					<span>同步数据：</span>
					<div>奖励：10金币（每日上限20金币）</div>
				</div>
				
			</div>
		</div>
		<div class="body">
			<div>
				<div class="body_two">
					<span>3</span>
				</div>
				<span>勋章任务</span>
			</div>
			<div class="body_one">
				<div class="one">完成勋章任务可以获得丰厚的金币奖励，累计完成数量可以提升薯粉等级，让薯粉们可以获得更多的福利哦！</div>
				<div class="two" style="margin-bottom: 0.1rem;">
					<span>早起的鸟儿：</span>
					<div class="two_a">说明：6:00-8:00之间刷牙即可获得此勋章</div>
				</div>
				<table>
					<tr>
						<td>累计7天-50$</td>
						<td>累计14天-200$</td>
					</tr>
					<tr>
						<td>累计30天-300$</td>
						<td>累计60天-500$</td>
					</tr>
					<tr>
						<td>累计90天-800$</td>
						<td></td>
					</tr>
				</table>
				<div class="two" style="margin-bottom: 0.1rem;">
					<span>口气清新的猫头鹰：</span>
					<div class="two_a">说明：21:00-23:00之间刷牙即可获得此勋章</div>
				</div>
				<table>
					<tr>
						<td>累计7天-50$</td>
						<td>累计14天-200$</td>
					</tr>
					<tr>
						<td>累计30天-300$</td>
						<td>累计60天-500$</td>
					</tr>
					<tr>
						<td>累计90天-800$</td>
						<td></td>
					</tr>
				</table>
				<div class="two" style="margin-bottom: 0.1rem;">
					<span>牙菌斑斗士：</span>
					<div class="two_a">说明：刷牙得分大于90分即可获得此勋章</div>
				</div>
				<table>
					<tr>
						<td>累计7天-50$</td>
						<td>累计14天-200$</td>
					</tr>
					<tr>
						<td>累计30天-300$</td>
						<td>累计60天-500$</td>
					</tr>
					<tr>
						<td>累计90天-800$</td>
						<td></td>
					</tr>
				</table>
				<div class="two" style="margin-bottom: 0.1rem;">
					<span>洁齿代言人：</span>
					<div class="two_a">说明：分享刷牙即可获得此勋章</div>
				</div>
				<table>
					<tr>
						<td>累计7天-50$</td>
						<td>累计14天-200$</td>
					</tr>
					<tr>
						<td>累计30天-300$</td>
						<td>累计60天-500$</td>
					</tr>
					<tr>
						<td>累计90天-800$</td>
						<td></td>
					</tr>
				</table>
				<div class="two" style="margin-bottom: 0.1rem;">
					<span>洁齿大师：</span>
					<div class="two_a">说明：刷牙得分大于95分即可获得此勋章</div>
				</div>
				<table>
					<tr>
						<td>累计7天-50$</td>
						<td>累计14天-200$</td>
					</tr>
					<tr>
						<td>累计30天-300$</td>
						<td>累计60天-500$</td>
					</tr>
					<tr>
						<td>累计90天-800$</td>
						<td></td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</template>

<script>
	import LoginHeader from '../../components/njrcomponents/login_header.vue'
	export default {
		name:'Medal',
		
		components:{
			LoginHeader
		},
		
	}
</script>

<style lang="less" scoped>
	.body{
		margin-top: 48px;
		border-bottom: 8px solid whitesmoke;
	}
	.body_two{
		text-align: center;
		width:48px;
		height:48px;
		display: inline-block;
		border-radius: 50%;
		background-color: lightpink;
		color: white;
		margin-left:16px;
	}
	.body_two span{
		font-size: 40px;
		
	}
	.body_two+span{
		margin-left:24px;
		font-size: 40px;
		line-height: 40px;
	}
	.one{
		margin: 32px 88px;
		font-size: 32px;
	}
	.two{
		margin-left: 88px;
		font-size: 32px;
		margin-bottom: 32px;
	}
	.two div{
		margin-top:8px;
	}
	.two_a{
		font-size:24px;
	}
	table {
	    border-collapse: collapse;
		margin: auto;
		width: 90%;
		text-align: center;
		margin-bottom: 32px;
	}
	
	table, td, th {
	    border:1.6px solid black;
	}
</style>
